<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        位置汇总
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <style>
        .layui-table-page select {
            height: 22px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="x-nav">
            <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>维保管理</cite></a>
            <a><cite>位置汇总</cite></a>
        </span>

        </div>


        <div class="main_box">
            <div class="panel-heading">
                <h2>位置汇总</h2>
            </div>
        </div>

        <div class="content_box">
            <div class="layui-card-body map_box" style="min-height: 1000px;">
                <div id="container"></div>
            </div>
            <form class="layui-form x-center box_form">
                <div class="layui-form-pane" style="margin-top: 15px;">
                    <div class="layui-form-item box_select">
                        <div>
                            <label class="layui-form-label">使用证号</label>
                            <div class="layui-input-inline">
                                <input  autocomplete="off"  type="text" class="layui-input" name="usenumber" id="usenumber" placeholder="使用证号">
                            </div>
                        </div>
                        <div>
                            <label class="layui-form-label">使用单位</label>
                            <div class="layui-input-inline">
                                <select name="companyId" id="companyId" lay-filter="brickType">
                                    <option value="">---</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="layui-form-label">项目名称</label>
                            <div class="layui-input-inline">
                                <select name="projectId" id="projectId" lay-search="">
                                <option value="">---</option>
                            </select>
                            </div>
                        </div>
                        <div>
                            <label class="layui-form-label">电梯类型</label>
                            <div class="layui-input-inline">
                                <select name="typeId" id="typeId" lay-search="">
                                <option value="">---</option>
                            </select>
                            </div>
                        </div>
                        <div>
                            <label class="layui-form-label">运行状态</label>
                            <div class="layui-input-inline">
                                <select name="runtype" id="runtype" lay-search="">
                                <option value="">---</option>
                                <option value="0">正在运行</option>
                                <option value="1">已报修</option>
                                <option value="2">正在维修</option>
                                <option value="3">正在保养</option>
                                <option value="4">停止运行</option>
                            </select>
                            </div>
                        </div>

                        <div class="layui-form-item area-picker" id="area-picker">
                            <div style="display: flex;flex-direction: column;">
                                <div class="layui-form-label" style="margin-bottom: 5px;">省市地区</div>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <select name="province" class="province-selector" lay-filter="province-1">
                                            <option value="">请选择省</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="city" class="city-selector" lay-filter="city-1">
                                            <option value="">请选择市</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="county" class="county-selector" lay-filter="county-1">
                                            <option value="">请选择区</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <input  autocomplete="off"  type="hidden" name="areaString" id="areaString">

                            <div style="display: flex;flex-direction: column;">
                                <label class="layui-form-label">添加时间</label>
                                <div>
                                    <div class="layui-input-inline">
                                        <input  autocomplete="off"  class="layui-input" placeholder="开始日" name="starttime" id="starttime">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input  autocomplete="off"  class="layui-input" placeholder="截止日" name="endtime" id="endtime">
                                    </div>
                                </div>
                            </div>

                            <div style="display: flex;">
                                <label class="layui-form-label">电梯品牌</label>
                                <div class="layui-input-inline">
                                    <select name="pp" id="pp" lay-search="">
                                    <option value="">---</option>
                                </select>
                                </div>
                            </div>

                            <div class="layui-input-inline layui-show-xs-block" style="display: flex;">
                                <button class="layui-btn" type="button" lay-filter="sreach" data-type="reload" @click="reload()">
                                <i class="layui-icon">&#xe615;</i></button>
                            </div>

                        </div>

                    </div>
                </div>
            </form>


        </div>

        <br><br><br><br><br><br>
    </div>
</body>



<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/myAjax.js"></script>
<script type="text/javascript" src="../../js/pub.js"></script>
<script type="text/javascript" src="../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    //配置插件目录
    layui.config({
        base: '../../js/',
        version: '1.0'
    });
</script>
<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function() {
        $ = layui.jquery; //jquery
        laydate = layui.laydate; //日期插件
        lement = layui.element; //面包导航
        laypage = layui.laypage; //分页
        layer = layui.layer; //弹出层
        var form = layui.form;
        okLoading.close($);
    });
</script>
<script>
    layui.use(['laydate', 'form', 'layarea', 'layer', ],
        function() {
            var laydate = layui.laydate;
            var layarea = layui.layarea;


            //执行一个laydate实例
            laydate.render({
                trigger: 'click',
                type: 'date',
                elem: '#starttime' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                trigger: 'click',
                type: 'date',
                elem: '#endtime' //指定元素
            });

            layarea.render({
                elem: '#area-picker',
                // data: {
                //     province: '广东省',
                //     city: '深圳市',
                //     county: '龙岗区',
                // },
                change: function(res) {
                    //选择结果
                    console.log(res);
                    $("#areaString").val(res.province + "," + res.city + "," + res.county);
                }
            });

            var form = layui.form;


            let request2 = {
                url: 'maintenance/company/findAll',
                data: {
                    userId: $userId
                },
                method: "GET",
            };
            sendRequest(request2, (res) => {
                let x = res.data;
                $.each(x, function(index, item) {
                    let opt = $("<option value=" + item.id + ">" + item.name + "</option>");
                    $("#companyId").append(opt);
                });
                form.render('select');
            });

            let request3 = {
                url: 'maintenance/project/findAll',
                method: "GET",
                data: {
                    userId: $userId
                },
            };
            sendRequest(request3, (res) => {
                let x = res.data;
                $.each(x, function(index, item) {
                    let opt = $("<option value=" + item.id + ">" + item.name + "</option>");
                    $("#projectId").append(opt);
                });
                form.render('select');
            });


            let request4 = {
                url: 'maintenance/elevatortype/gettypeData',
                method: "GET",
                data: {
                    userId: $userId
                },
            };
            sendRequest(request4, (res) => {
                let x = res;
                $.each(x, function(index, item) {
                    let opt = $("<option value=" + item.id + ">" + item.name + "</option>");
                    $("#typeId").append(opt);
                });
                form.render('select');
            });

            let request5 = {
                url: 'maintenance/elevatorbrand/getbrandData',
                method: "GET",
                data: {
                    userId: $userId
                },
            };
            sendRequest(request5, (res) => {
                let x = res;
                $.each(x, function(index, item) {
                    let opt = $("<option value=" + item.id + ">" + item.name + "</option>");
                    $("#pp").append(opt);
                });
                form.render('select');
            });

            form.render('select');

            form.on('select(brickType)', function(data) {

                let opthtml = $("<option value=''>请选择</option>");
                $("#projectId").html(opthtml);
                form.render('select');
                var val = data.value;
                if (val != "") {
                    let request = {
                        url: 'maintenance/project/findByCompanyId',
                        data: {
                            companyId: val,
                            userId: $userId
                        },
                        method: "POST",
                    };
                    sendRequest(request, (res) => {
                        let x = res.data;
                        $.each(x, function(index, item) {
                            let opt = $("<option value=" + item.id + ">" + item.name + "</option>");
                            $("#projectId").append(opt);
                        });
                        form.render('select');
                    });
                }

            });

        });



    function admin_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }
</script>

<script>
    new Vue({
        el: "#app",
        data: {
            statistics: {

            }
        },
        created() {

        },
        methods: {

            reload() {
                let request_ewm = {
                    url: 'maintenance/elevator/listMap',
                    method: "GET",
                    data: {
                        usenumber: $("#usenumber").val(),
                        companyId: $("#companyId").val(),
                        projectId: $("#projectId").val(),
                        typeId: $("#typeId").val(),
                        runtype: $("#runtype").val(),
                        brandId: $("#pp").val(),
                        areaString: $("#areaString").val(),
                        starttime: $("#starttime").val(),
                        endtime: $("#endtime").val(),
                        userId: $userId,
                    }
                };
                sendRequest(request_ewm, (res) => {
                    toaddress(res);
                });

            }
        }
    });
</script>


<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=jA0VzOF5uYehineGKLNc1FBIPGDSyO7R"></script>
<script type="text/javascript">
    let request = {
        url: 'maintenance/elevator/listMap',
        data: {
            userId: $userId,
        },
        method: "get",
    };
    sendRequest(request, (res) => {
        toaddress(res);
    });

    function toaddress(res) {

        var map = new BMapGL.Map('container');
        var point;
        if (res.data.length == 0) {
            point = new BMapGL.Point(116.404, 39.928);
        } else {
            point = new BMapGL.Point(res.data[0].project.landmark.split(",")[0], res.data[0].project.landmark.split(",")[1]);
        }

        map.centerAndZoom(point, 12);
        map.enableScrollWheelZoom(true);

        var myIcon = new BMapGL.Icon("../../images/dt.png", new BMapGL.Size(52, 60));

        for (var i = 0; i < res.data.length; i++) {
            (function(x) {
                var pt = new BMapGL.Point(res.data[i].project.landmark.split(",")[0], res.data[i].project.landmark.split(",")[1]);
                var marker = new BMapGL.Marker(pt, {
                    icon: myIcon
                });
                // 将标注添加到地图
                map.addOverlay(marker);



                var elevatorString = "";
                var height = 0;
                for (var z = 0; z < res.data[i].elevatorList.length; z++) {
                    var runtype = "";
                    if (res.data[i].elevatorList[z].runtype == 0) {
                        runtype = "正在运行";
                    }
                    if (res.data[i].elevatorList[z].runtype == 1) {
                        runtype = "已报修";
                    }
                    if (res.data[i].elevatorList[z].runtype == 2) {
                        runtype = "正在维修";
                    }
                    if (res.data[i].elevatorList[z].runtype == 3) {
                        runtype = "正在保养";
                    }
                    if (res.data[i].elevatorList[z].runtype == 4) {
                        runtype = "停止运行";
                    }

                    var detail = res.data[i].elevatorList[z].address + "&nbsp;&nbsp;&nbsp;&nbsp;" + runtype;
                    elevatorString += detail + '<br/>';
                    height += 30;

                }
                var opts = {
                    width: 450,
                    height: height,
                    title: "项目信息：" + res.data[i].project.name
                };


                var infoWindow = new BMapGL.InfoWindow('电梯信息：<br/>' + elevatorString, opts);

                marker.addEventListener('click', function() {
                    map.openInfoWindow(infoWindow, pt);
                });
            })(i);
        }
    }
</script>

</html>